<template>
  <button class="btn btn-primary" @click="info">Message</button>
  <button class="btn btn-error" @click="notice">Notice</button>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
  <v-md-preview :text="text" height="400px"></v-md-preview>
  <!-- preview-class 为主题的样式类名，例如vuepress就是vuepress-markdown-body -->
  <v-md-preview-html
    :html="html"
    preview-class="vuepress-markdown-body"
    height="400px"
  ></v-md-preview-html>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

const text = ref('# Hello World')
const html = ref('<h1>Hello World!!</h1>')

const info = () => {
  console.log('I AM A TEST')
  proxy.$msg.info('This is a normal message')
}

const notice = () => {
  proxy.$notice.open({
    message: 'Notification Title',
    description:
      'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    onClick: () => {
      console.log('Notification Clicked!')
    }
  })
}
</script>
